<template>
		<ls-page title="">
	<view class="history-view"> 
		<!-- 积分头部 -->
		<view class="jf-head">
			<view class="jf-bwtten">
				<view class="jf-continarxx">
					<view class="">
						当前积分
					</view>
					<view class="">
						{{totalPoint || 0}}
					</view>
				</view>
				<view class="jf-btn" @click="useScore">
					<view class="sy-title">
						去使用
					</view>
					<image class="arrow_icon" src="https://oss.jtmckj.com/wmp/jfsc/pay/arrow_hh.png" mode=""></image>
				</view>
			</view>
			<view class="" style="display: flex;">
				<view class="day-continar">
					本月获取：
					<text class="" style="color: #009900;"> {{currentPoint}} </text>
				</view>
				<view class="day-continar" style="padding-left: 39rpx;">
					已消耗：
					<text class="red-col" style="color: #FF3333;"> {{currentUse}} </text>
				</view>
			</view>
		</view>
		
		<!-- tabs -->
		<view class="tab-continar">
			<up-tabs @click="tabChange" :current="tabsCurrent" :list="listScoreType" lineWidth="30" lineColor="#FF6A00"
				:activeStyle="activeStyle"
				:inactiveStyle="inactiveStyle" 
				itemStyle="padding:0 15px; height: 34px;">
			</up-tabs>
		</view>
		
		<!-- 积分内容区域 -->
		<view class="product-box">

			<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" :down="{isLock: true}">
				<view class="product-item" v-for="(item,index) in scoreList" :key="index" @click="toDetails(item)">
					<view class="title"> {{item.typeName}} </view>
					<view class="jf-qsbwt">
						<view class="tab-bq"> {{item.title}} </view>
						<view class="chxy-row-ac" style="height: 40rpx;">
							<view class="price-num " :class="item.type === '2'? 'red-col':'gre-col'">{{item.operPoint}}</view>
							<image class="arrow" src="https://oss.jtmckj.com/wmp/jfsc/pay/arrow.png" mode=""></image>
						</view>
					</view>
					<view class="time">{{filterTime(item.operTime)}}</view>
				</view>
			</mescroll-body>

		</view>
	</view>
	</ls-page>
</template>

<script setup>
	import { goodsPublic } from '@/pagesPointShop/api/goods.js';
	import { ref, reactive } from 'vue';
	import { onPageScroll, onReachBottom } from '@dcloudio/uni-app';
	import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
	import { useUserStore } from '@/store/user.js';
	const activeStyle = ref({ color: '#FF6A00', fontWeight: 'bold',  transform: 'scale(1.05)' });
	const inactiveStyle = ref({ color: '#666666', transform: 'scale(1)'}); 
	
	const store = useUserStore();

	// 数据列表
	const scoreList = ref([]);
	const tabsCurrent = ref(0);
	const listScoreType = reactive([
		{ name: '全部', type: '' },
		{ name: '获取', type: '1' },
		{ name: '消耗', type: '2' },
	]);
	const totalPoint = ref(0);
	const currentPoint = ref(0);
	const currentUse = ref(0);

	const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom)

	const upCallback = (mescroll) => {
		let type = listScoreType[tabsCurrent.value].type || ''
		console.log('store.userInfo', store.userInfo)
		let modal = {
			"functionName": "getMemberPoint",
			"orgCode": uni.getStorageSync('userInfo')?.orgCode,
			"contentData": {
				"memberCode": uni.getStorageSync('userInfo')?.userCode,
				"memberCardCode":  uni.getStorageSync('cardInfo')?.code,
				"type": type,
				"pageSize": mescroll.size,
				"pageIndex": mescroll.num
			}
		}
		goodsPublic(modal).then(res => {
			console.log('res', res)
			if (res.opFlag !== '1') {
				mescroll.endErr();
				return
			}
			totalPoint.value = res.content.rowData.totalPoint || 0
			currentPoint.value = res.content.rowData.currentPoint || 0
			currentUse.value = res.content.rowData.currentUse || 0
			const total = res.content.rowData.totalCount
			const curPageData = res.content.rowData.rowData || []
			if (mescroll.num == 1) scoreList.value = [];
			scoreList.value = scoreList.value.concat(curPageData);
			mescroll.endSuccess(total);
		}).catch(() => {
			mescroll.endErr();
		})
	}

	const filterTime = (dateStr) => {
		let result = ''
		if (dateStr) {
			result = dateStr.split("T").join(" ");
		}
		return result
	}

	const currIndex = ref(0)

	//tab点击
	const tabChange = (item) => {
		tabsCurrent.value = item.index
		getMescroll().resetUpScroll()
	}

	const toDetails = (item) => {
		// 消耗 - 红色 跳转 兑换成功exchange
		if (item.type === '2' && item.referCode) {
			uni.navigateTo({ 
				url: './detail?showResult=' + 'showResult' + '&code=' + item.referCode
			})
		}
		// 获取
		if (item.type === '1' && item.referCode) {
			uni.navigateTo({
				url: './scoreDetail?code=' + item.referCode
			}) 
		}
	}

	const useScore = (item) => {
		uni.navigateTo({
			url: '/pagesPointShop/view/index'
		})
	}
</script>

<style scoped lang="less">
	.history-view { 
		height:100vh;
		width: 100vw;
		background-color: #f2f2f2;
		overflow: scroll;
	}

	.jf-head {
		margin: 24rpx;
		padding: 24rpx;
		background: #FFFFFF;
		border-radius: 16rpx;

		.jf-bwtten {
			display: flex;
			justify-content: space-between;

			.jf-continarxx {
				view:nth-child(1) {
					font-weight: 500;
					font-size: 24rpx;
					color: #666666;
				}

				view:nth-child(2) {
					margin-top: 10rpx;
					font-weight: bold;
					font-size: 36rpx;
					color: #212121;
				}
			}

			.jf-btn {
				margin-top: 20rpx;
				padding: 0 27rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 60rpx;
				border-radius: 30rpx;
				border: 1rpx solid #212121;
				text-align: center;
				line-height: 60rpx;

				.sy-title {
					margin-right: 11rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #212121;
				}

				.arrow_icon {
					width: 14rpx;
					height: 24rpx;
				}
			}
		}

		.day-continar {
			font-weight: 500;
			font-size: 24rpx;
			color: #666666;

			.text {}
		}
	}

	.tab-continar {
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.product-box {
		.product-item {
			padding: 24rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-bottom: 20rpx;

			.title {
				font-weight: bold;
				font-size: 32rpx;
				color: #212121;
			}

			.jf-qsbwt {
				margin: 20rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.tab-bq {
					height: 40rpx;
					background: #FFF0E5;
					border-radius: 8rpx;
					padding: 0 13rpx;
					font-weight: 500;
					font-size: 26rpx;
					color: #FF6A00;
				}

				.price-num {
					font-weight: 500;
					font-size: 36rpx;
					margin-right: 8rpx;
				}

				.arrow {
					width: 14rpx;
					height: 24rpx;
				}
			}

			.time {
				font-weight: 500;
				font-size: 26rpx;
				color: #666666;
			}


		}
	}



	.red-col {
		color: #FF3333;
	}

	.gre-col {
		color: #009900;
	}
</style>